<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14.遍历操作与DOM绘制</title>
</head>

<body>
  <script>
    //使用系统提供的 API 可以方便获取对象属性与值
    const hd = {
      name: "后盾人",
      age: 10
    };
    console.log(Object.keys(hd)); //["name", "age"]
    console.log(Object.values(hd)); //["后盾人", 10]
    console.table(Object.entries(hd)); //[["name","后盾人"],["age",10]]

    //使用`for/in`遍历对象属性
    for (let key in hd) {
      console.log(key, hd[key]);
    }
    //`for/of`用于遍历迭代对象，不能直接操作对象。但`Object`对象的`keys/`方法返回的是迭代对象。
    /*for(const key of hd){
      console.log(key); //Uncaught TypeError: hd is not iterable for/of  不能迭代对象的key
      
    }**/
    let lessons = [{ name: 'js', click: 99 }];
    for (const iterator of lessons) {
      console.log(iterator); // for of可以操作数组
    }
    for (const key of Object.keys(hd)) {
      console.log(key);
    }
    //获取所有对象属性
    for (const key of Object.values(hd)) {
      console.log(key);
    }

    //同时获取属性名与值
    for (const array of Object.entries(hd)) {
      console.log(array);
    }
    //使用扩展语法同时获取属性名与值
    for (const [key, value] of Object.entries(hd)) {
      console.log(key, value);
    }

    // DOM 绘制
    lessons = [
      { name: "js", click: 23 },
      { name: "node", click: 192 }
    ];
    let ul = document.createElement("ul");
    for(const val of lessons){
      let li = document.createElement("li");
      li.innerHTML=  `课程${val.name}，点击数${val.click}`;
      ul.appendChild(li)
    }
    document.body.appendChild(ul);

  </script>
</body>

</html>